<template>
  <div>
    <el-page-header :content='``' @back='back()' />
    <!-- <div id="main-panel"> -->
    <div class='box-header mt-3 mb-3 bottom-line'>
      <h2>
        {{ $t('batch.batch_operation_title') }}
      </h2>
    </div>
    <div class='container-fluid'>
      <el-row :gutter='20'>
        <el-col :sm='12' :md='8' :lg='6'>
          <push-app-command
            :new-command-event='doPushApp'
            :show-last-data='false'
          />
        </el-col>
        <el-col :sm='12' :md='8' :lg='6'>
          <push-firmware-command
            :new-command-event='doPushFirmware'
            :show-last-data='false'
          />
        </el-col>
        <el-col :sm='12' :md='8' :lg='6'>
          <check-update-command
            :new-command-event='doCheckUpdate'
            :show-last-data='false'
          />
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <emv-setting
            :new-command-event="emvSetting"
            :show-last-data="false"
          />
        </el-col>
      </el-row>
      <remark
        :remark-title-info='remarkTitle'
        v-model='remarkVisible'
        @close='remarkVisible = false'
      />
      <push-app
        ref='pushAppRef'
        v-model='pushAppVisible'
        :batch-id='batchId'
        @close='pushAppVisible = false'
        @pushResultEvent='pushResultEvent'
      />
      <push-firmware
        v-model='pushFirmwareVisible'
        :batch-id='batchId'
        @close='pushFirmwareVisible = false'
      />
      <push-result
        ref='pushResult'
        v-model='pushResultDetailsVisible'
        @close='pushResultDetailsVisible = false'
      />
      <emv
        v-model='emvVisible'
        :batch-id='batchId'
        @close='emvVisible = false'
      ></emv>
    </div>
  </div>
</template>
<script>
import Remark from './command/remark.vue'
import PushApp from './PushApp'
import PushFirmware from './PushFirmware'
import pushAppCommand from './push-app-command'
import pushFirmwareCommand from './push-firmware-command'
import CheckUpdateCommand from './check-update-command'
import PushResult from './push-result'
import EmvSetting from './operation/emv-setting.vue'
import Emv from './operation/emv.vue'

export default {
  name: 'SelectApp',
  components: {
    pushAppCommand,
    pushFirmwareCommand,
    Remark,
    PushApp,
    PushFirmware,
    CheckUpdateCommand,
    PushResult,
    EmvSetting,
    Emv
  },
  props: {
    childData: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      remarkVisible: false,
      remarkTitle: '',
      devSn: '',
      pushAppVisible: false,
      pushFirmwareVisible: false,
      batchId: '0',
      pushResultDetailsVisible: false,
      emvVisible: false
    }
  },
  mounted() {
    this.batchId = this.$route.params.batchId
  },
  methods: {
    pushResultEvent(res) {
      this.$refs['pushResult'].init(res, 'delete', this.batchId)
      this.pushResultDetailsVisible = true
    },
    back() {
      this.$router.back(-1)
    },
    modalClose() {
      this.$emit('update:model-value', false) // 直接修改父组件的属性
    },
    doCheckUpdate() {
      this.remarkTitle = this.$t('command.desc.B2')
      this.remarkVisible = true
    },
    doPushApp() {
      this.pushAppVisible = true
      this.$refs.pushAppRef.chooseAppPage()
    },
    doPushFirmware() {
      this.pushFirmwareVisible = true
    },
    emvSetting() {
      this.emvVisible = true
    }

  }
}
</script>

<style lang='scss'>
.batch-select-command {
  .el-select {
    width: 120px;
  }
}
</style>
<style lang='scss' scoped>
#main-panel {
  height: 1279px;
  background: #fdfdfd;
  border: 1px solid #edf2f9;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.07);
  border-radius: 8px;
}

#title {
  display: inline-block;
  margin-top: 34px;
  margin-left: 44px;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: bold;
  color: #333333;
}

#customer-command-manage-button {
  float: right;
  font-size: 14px;
  font-family: Open Sans;
  font-weight: bold;
  color: #2c7be5;
  margin-top: 21px;
  margin-right: 33px;
}

#history-button {
  float: right;
  font-size: 14px;
  font-family: Open Sans;
  font-weight: bold;
  color: #2c7be5;
  margin-top: 21px;
  margin-right: 33px;
}
</style>
